<template>
  <view>
    <u-tabs
      :list="list"
      :activeStyle="activeStyle"
      :inactiveStyle="inactiveStyle"
      lineColor="url(../../static/tab-line.png) 100% 100%"
      :lineWidth="lineWidth"
      :lineHeight="lineHeight"
      :lineBottom="lineBottom"
      :duration="duration"
      :scrollable="scrollable"
      :current="current"
      :keyName="keyName"
      :iconSize="iconSize"
      @click="handleClick"
      @change="handleChange"
    >
    <view v-if="search" slot="right" style="margin-right: 10rpx;">
      <u-icon name="search" size="20" bold @click="handleSearch" />
    </view>
    </u-tabs>
    <u-line v-if="border" color="#D9D9D999" />
  </view>
</template>

<script>
export default {
  props: {
    // 选项卡列表
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 选中样式
    activeStyle: {
      type: Object,
      default: () => {
        return {
          color: "#222222",
          fontWeight: "bold",
          transform: "scale(1.05)",
        };
      },
    },
    // 未选中样式
    inactiveStyle: {
      type: Object,
      default: () => {
        return {
          color: "#979797",
          transform: "scale(1)",
        };
      },
    },
    // 下划线宽度
    lineWidth: {
      type: [String, Number],
      default: 64,
    },
    // 下划线高度
    lineHeight: {
      type: [String, Number],
      default: 4,
    },
    // 下划线距离
    lineBottom: {
      type: [String, Number],
      default: 12,
    },
    // 下边框线
    border: {
      type: Boolean,
      default: false,
    },
    // 滑块移动时间，单位ms
    duration: {
      type: Number,
      default: 300,
    },
    // 菜单是否可滚动
    scrollable: {
      type: Boolean,
      default: true,
    },
    // 当前选中索引
    current: {
      type: Number,
      default: 0,
    },
    // 读取的键名
    keyName: {
      type: String,
      default: "name",
    },
    // 图片大小
    iconSize: {
      type: String,
      default: "48rpx",
    },
    // 是否显示搜索图标
    search: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    handleClick(val) {
      this.$emit("click", val);
    },
    handleChange(val) {
      this.$emit("change", val);
    },
    handleSearch() {
      this.$emit("search");
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll_list {
  display: flex;
  flex-direction: row;
  position: relative;
  .scroll_item {
    min-width: 108rpx;
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .scroll_label {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .scroll_bottom_line {
    height: 3px;
    background: $u-primary;
    width: 30px;
    position: absolute;
    bottom: 2px;
    border-radius: 100px;
    transition-property: transform;
    transition-duration: 300ms;
  }
}
</style>
